<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/jquery-1.10.1.min.js"></script>
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 32px;
            border: 1px solid rgb(114, 113, 109);
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <h2>jQuery核心</h2>
        <div class="list">
            <li>00</li>
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li class="last">06</li>
        </div>
        <div class="list">
            <li>10</li>
            <li class="first">11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li class="last">16</li>
        </div>
    </div>
</body>
<script>
    // 等页面所有内容(文档,css,js,img)加载完毕之后执行

    // 原生写法
    // window.onload = function () {
    //     console.log("所有内容加载完毕");
    // }; 

    // jQuery写法 
    $(window).load(function () {
        console.log("所有内容加载完毕");
    })


    // 原生写法
    // document.addEventListener("DOMContentLoaded", function () {
    //     console.log("文档加载完毕");
    // })

    // jQuery写法 
    $(document).ready(function () {
        console.log("文档加载完毕");
    })
    // 简写
    $(function () {
        console.log("文档加载完毕");
    })


    // each  jQuery遍历方法
    $(".list li").each(function (index, item) {
        // 1.this指向循环的当前元素
        // 2.item this 是原生dom元素  如果想使用jQuery的相关方法, => 转为jQuery对象 $(this) $(item) 
        console.log(index, item, this)
    })


    // length  返回jQuery对象中元素的个数
    console.log($(".list li").length);

    // index  返回jQuery对象中元素对应的下标(相对于同级)
    console.log($(".first").index());
    console.log($(".last").index());
    // 注意：如果有多个元素，默认返回第一个
    console.log($("li").index());
    // 绑定事件
    $(".list li").click(function () {
        console.log(this);
        console.log($(this).index()); //默认返回同级元素的下标
        console.log($(this).index(".list li")); //拓展 传入一个选择器 可以作为查询下标的范围
    })


    // data 在元素上存放数据 (jQuery中新增的存储数据的方法，可以在一个元素上存放任何格式的数据而不仅仅是字符串)
    // 存 $(ele).data(key,val);
    $(".first").data("num", 100)
    $(".first").data("bool", false)

    // 取 $(ele).data(key);
    console.log($(".first").data("num"));
    console.log($(".first").data("bool"));

    // removeData 删除在元素上存放的数据 

    // 删 $(ele).removeData(key);
    $(".first").removeData("num", 100)
    $(".first").removeData("bool", false)


</script>

</html>